36. Projekt końcowy - tydzień 3 z 3

PWA (Progressive Web App) to nic innego, jak aplikacja webowa (zbudowana przy pomocy HTML, CSS i JS) wzbogacona o kilka udogodnień, które sprawiają, że wygląda ona jak natywna aplikacja mobilna. Aby aplikacja mogła zostać uznana za PWA, musi spełniać między innymi następujące kryteria:

• Responsive Web Design – aplikacja musi wyglądać dobrze zarówno na dużych, jak i małych ekranach,
• HTTPS – aplikacja musi używać protokołu HTTPS,
• URL – aplikacja musi być dostępna pod konkretnym adresem URL,
• działanie bez dostępu do internetu – nie musi być to pełna funkcjonalność, aplikacja może po prostu uruchomić się i wyświetlić powiadomienie o konieczności nawiązania połączenia z siecią,
• skrót do aplikacji – użytkownik musi mieć możliwość dodania ikony aplikacji do ekranu startowego swojego urządzenia,
• ekran startowy – aplikacja musi mieć opcję dodania ekranu startowego (splash screeen).

Zademonstrujemy teraz, w jaki sposób sprawić, aby aplikacja spełniała te warunki.

Responsywność

Aby Twoja aplikacja działała dobrze na różnych rozmiarach ekranów, musisz przede wszystkim użyć meta tagu, który pojawiał się kilka razy w treściach bootcampa:

<meta name="viewport" content="width=device-width, initial-scale=1">

Nie wahaj się również wrócić do treści modułów o RWD i/lub Bootstrapie, aby dopracować responsywność swojej aplikacji.

HTTPS i URL: konfiguracja Firebase

Firebase to platforma rozwijana przez Google, która ułatwia developowanie aplikacji mobilnych. Skorzystamy z Firebase, aby nasza PWA była oferowana przez HTTPS oraz otrzymała adres URL, pod którym będzie można ją odnaleźć.

Instrukcje dotyczące zakładania i konfiguracji projektu zapewnia oficjalna dokumentacja Firebase. Tak jak sugeruje punkt pierwszy manuala, musimy otworzyć stronę z konsolą firebase, z poziomu której możemy dodać nowy projekt:

Po wpisaniu nazwy projektu możesz zmienić lokalizację, zaakceptować zgody i sprawdzić inne możliwości panelu firebase:

Po kliknięciu w zaznaczone na powyższym rysunku miejsce widzimy dane naszej aplikacji, które mogą przydać się później.

Instalacja Firebase

Kolejnym krokiem będzie instalacja firebase. Z poziomu wiersza poleceń zainstaluj globalnie pakiet firebase-tools:

npm install -g firebase-tools

a następnie:

firebase login --interactive

Po wpisaniu powyższej komendy uruchomi się domyślna przeglądarka i poprosi nas o zalogowanie się kontem, z którego tworzyliśmy projekt firebase. Teraz wybierzmy do jakich celów będziemy używać naszej aplikacji. Przejdźmy do wiersza poleceń (do wykonania poniższych kroków zaleca się użycie terminala wbudowanego w system, a nie programu typu GitBash). Wpisujemy:

firebase init hosting

Następnie zatwierdzamy naszą gotowość za pomocą wpisania w terminal y lub yes.

Konfiguracja hostingu

Kolejnym krokiem będzie skonfigurowanie naszego folderu jako Hosting. W tym celu musimy poruszać się strzałkami w górę i w dół, zaznaczyć spacją opcję Hosting: Configure and deploy Firebase Hosting sites. Po zatwierdzeniu tej opcji klawiszem Enter zobaczymy listę projektów przypisanych do naszego konta Google. Jeśli pokazuje się nasz projekt, musimy go wybrać z listy.

1. Wpisz ścieżkę do głównego folderu, w którym tworzysz builda. Dla osób, które wybrały create-react-app, jest to folder build.
2. W kolejnym kroku, zgodnie z zaleceniem dokumentacji Firebase, wybieramy opcję Yes i pozwalamy na skonfigurowanie aplikacji jako SPA (Single Page Application).
3. Nie nadpisujemy pliku index.html.

Po konfiguracji powinniśmy otrzymać wiadomość Firebase initialization complete!, dokładnie tak na załączonym poniżej screenie:

Kolejnym krokiem będzie zrobienie builda naszej aplikacji – create-react-app będzie to npm run build. Kiedy zbudujemy naszą aplikację, wystarczy wpisać w konsolę firebase deploy. W tym momencie powinniśmy zobaczyć status naszego deploya, a następnie link do naszej aplikacji.

Po przejściu na stronę naszym oczom powinna ukazać się aplikacja:

Po pomyślnym wyświetleniu aplikacji w przeglądarce otwórz inspektor elementów i sprawdź, czy posiadasz zakładkę Audits. Jeżeli nie, zaktualizuj wersję przeglądarki lub zainstaluj najnowszą wersję Google Chrome. Audyt możemy przeprowadzić także korzystając z dodatku. Audyt Google wypisze nam listę brakujących rzeczy, które musimy utworzyć, żeby spełnić wszystkie wymagania aplikacji PWA.

Działanie offline: service worker

Jedną z nich jest service worker, w którym pokażemy jakie elementy chcemy zapamiętać w cache naszej przeglądarki. Jest to niezbędne do tego, by nasza aplikacja mogła wyświetlać część danych w trybie offline.

Na starcie załączmy skrypt przed zakończeniem tagu body:

<script>
    if('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/sw.js')
            .then(function () {
                console.log('Service Worker Registered');
            });
    }
</script>

Następnie w pliku sw.js zdefiniuj, co ma być cache'owane i dostępne bez internetu dla użytkownika. Robimy to w następujący sposób:

var cacheName = 'app-name';
var filesToCache = [
  '/'
];
self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});
self.addEventListener('activate',  event => {
  event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request, {ignoreSearch:true}).then(response => {
      return response || fetch(event.request);
    })
  );
});

Ścieżki elementów, które chcemy cache'ować (warto cache'ować wszystkie pliki statyczne), dodajemy do obiektu filesToCache. Następnie konieczny jest ponowny build i deploy. Jeśli je zrobimy, możemy przejść do inspektora i sekcji Application, a następnie w Cache Storage sprawdzić, czy wszystko dodało się poprawnie:

Tożsamość aplikacji

Nasza aplikacja jest serwowana przez protokół HTTPS, a w Cache Storage zapisują się nam elementy, które będą działać bez dostępu do internetu. Przyszedł czas na pokazanie tożsamości naszej aplikacji. Zaraz dodamy niezbędne informacje o naszej aplikacji, a także ikony, które będą wyświetlały się m.in. jako skróty na pulpicie.

W celu dodania funkcjonalności Add to homescreen musimy utworzyć plik manifest.json (osoby tworzące projekt na create-react-app posiadają go w projekcie od początku). Jedną z opcji jest stworzenie pliku ręcznie, korzystając z przykładu:

{
  "name": "app-name",
  "short_name": "PWA",
  "icons": [{
    "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#FFF",
  "theme_color": "#FFF"
}

Drugą opcją jest droga na skróty i użycie generatora.

Gdy już będziemy mieli gotowy plik manifest.json, należy dołączyć go do pliku index.html:

<link rel="manifest" href="manifest.json">

Wejdźmy teraz w inspektora elementów, a ściślej w zakładkę Application, i z sidebara wybierzmy kategorię manifest. Jeśli wszystko poprawnie dodaliśmy do naszej aplikacji i zrobiliśmy deploya ze zmianami, to zobaczymy tożsamość naszej aplikacji:

Teraz osoba przeglądająca aplikację będzie miała możliwość dodania jej ikony na pulpit. Na potrzeby modułu zmieniliśmy standardową ikonę React na uśmiech:

Ty oczywiście musisz samodzielnie zadbać o to, by odpowiednie ikony we właściwych rozmiarach znalazły się w folderze icons.

Splash screen

Jak już wspomnieliśmy, w aplikacjach PWA ważną rzeczą jest też splash screen. Generalnie jest to grafika, która wyświetla się po otworzeniu aplikacji. Ze względu na różne rozmiary viewportu w urządzeniach tworzymy kilka ilustracji dla odpowiednich rozdzielczości.

Wszystko, czego potrzebujemy, by ujrzeć splash screen naszej aplikacji, to dodanie:

<link rel="apple-touch-startup-image" href="images/splash/launch-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1536x2048.png" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1668x2224.png" media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-2048x2732.png" media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">

Oczywiście pamiętaj o utworzeniu obrazków, prawidłowym nazewnictwie i zmianie ścieżek na poprawne.

Podsumowanie

Dostosowaliśmy właśnie aplikację do podstawowych wymagań PWA! Sprawiliśmy, że:

• wyświetla niektóre treści offline,
• posiada plik manifest.json,
• posiada ikony i faviconę,
• używa service worker,
• zawiera splash screen,
• używa protokołu HTTPS,
• przekierowuje ruch z HTTP na HTTPS,
• ma własny URL,
• działa na wszystkich przeglądarkach,
• używa tagu <meta name="viewport">.

Ponadto Audyt Google wymaga, by aplikacja typu PWA:

• szybko ładowała się na internecie 3G,
• zawierała content, nawet kiedy JS jest wyłączony dla przeglądarki.

Szczegółowe wymagania i poradniki, jak zaimplementować daną funkcjonalność, można znaleźć pod adresem: https://developers.google.com/web/progressive-web-apps/checklist.

Życzymy Wam otrzymania najwyższego możliwego wyniku dla aplikacji:

Powodzenia!

Podczas prac w projekcie końcowym powstała aplikacja, która posiada kilka widoków, a każdy z nich oprogramowaną funkcjonalność. Zadaniem dla osób chętnych było wzbogacenie aplikacji o animacje i przerobienie jej na aplikację PWA. W niniejszym submodule przedstawimy inne ciekawe zabiegi, o które można wzbogacić projekt.

Hosting

W poprzednim submodule zrobiliśmy deploy projektu na Firebase. Kiedy nasza aplikacja urośnie do pokaźnych rozmiarów i będziemy chcieli pokazać ją szerszemu gronu, może zdarzyć się, że darmowy hosting będzie nieodpowiedni ze względu na usypianie serwera, brak możliwości przypinania domen, etc. Możemy wybrać inny hosting, który będzie odpowiadał naszym potrzebom. Sporo darmowych hostingów ma mocno ograniczone możliwości, ale czasami za małą dopłatą możemy zyskać dostęp do wszystkich opcji.

Na co uważać? Przede wszystkim, uważaj na promocje. Jeżeli zastanawiasz się nad usługodawcą, który proponuje Ci serwer za złotówkę przez pierwszy rok, ale nie możesz znaleźć ceny za kolejne lata, to nie próbuj. W przypadku takich sytuacji bardzo często jest tak, że pierwszy rok lub miesiąc kosztuje 1 zł, a każdy kolejny nawet kilkadziesiąt razy tyle — w końcu dostawcy hostingów też muszą na czymś zarabiać :)

Znajdź dostawcę, który ma jasny, przejrzysty cennik i przeczytaj jego całą ofertę. Dobre hostingi płatne, które możemy polecić to:

• https://www.heroku.com/
• https://aws.amazon.com/
• https://surge.sh/
• https://www.netlify.com/

Organizacja pracy

Projekt, który robisz w pojedynkę, różni się od projektu grupowego. Kiedy zaczniesz swój pierwszy projekt komercyjny, jest spore prawdopodobieństwo, że będzie to praca zespołowa. Dobrze znasz system kontroli wersji GIT, ale jak organizuje się pracę w zespołach kilkuosobowych?

Na początek dobrze wybrać jedną z możliwych metod planowania projektu, najlepiej zgodne z manifestem Agile (zasady dla zwinnych metodyk tworzenia oprogramowania). Najczęściej stosowany jest SCRUM, który pojawiał się w naszym bootcampie. Polecamy pogłębić swoją wiedzę i poczytać o tej metodologii w internecie, a teraz zajmiemy się narzędziami, które mogą ułatwić nam pracę nad projektem.

Narzędzie do organizacji pracy:

• Trello
• Asana
• Jira

Zapoznaj się z tymi narzędziami, odwiedzając strony internetowe producentów. Zalecamy też skorzystanie z porównywarki.

Jeśli uważasz, że takie narzędzie nie jest potrzebne i chcesz wyłącznie zwiększyć produktywność w zespole, to możemy skorzystać z któregoś z tych narzędzi:

• todoist – tworzenie list zadań,
• dropbox – wymiana plikami w zespole z możliwością rewizji,
• slack – platforma do komunikacji zespołowej.

Sprawdź jeszcze inne narzędzia, które polecamy, pobierając lub wyświetlając nasz poradnik Developers Tools.